import React from "react";
import styled, { keyframes } from "styled-components";
import { Typography } from "antd";
import { useSelector } from "react-redux";

const { Title } = Typography;

// 创建一个动画效果
const gradientAnimation = keyframes`
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
`;

// 创建一个容器组件
const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: ${(props) =>
    props.theme === "dark"
      ? "linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff)"
      : "linear-gradient(45deg, #ff9a9e, #fad0c4, #ffecd2, #fcb69f, #ffecd2, #ffe9a8, #fec771)"};
  background-size: 300% 300%;
  animation: ${gradientAnimation} 15s ease infinite;
`;

// 创建一个标题组件
const StyledTitle = styled(Title)`
  && {
    color: ${(props) => (props.theme === "dark" ? "#ffffff" : "#333333")};
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
    text-shadow: ${(props) =>
      props.theme === "dark"
        ? "2px 2px 4px rgba(255, 255, 255, 0.1)"
        : "2px 2px 4px rgba(0, 0, 0, 0.1)"};
  }
`;

const Home = () => {
  const { theme } = useSelector((state) => state.layout);

  return (
    <Container theme={theme}>
      <StyledTitle theme={theme} level={1}>
        Jevon-Blog-CMS
      </StyledTitle>
    </Container>
  );
};

export default Home;
